<template>
  <div class="record">
    <div class="header">
      <top-bar :barObj="barObj"/>
    </div>
    <div class="content">
      <div class="title">
        <span :class="{'title-active':titleActive=='out'}" @click="transfer('out')">转出记录</span>
        <span
          :class="{'title-active':titleActive=='in'}"
          class="tit_border"
          @click="transfer('in')"
        >转入记录</span>
      </div>
      <ul>
        <li v-if="titleActive=='out'" v-for="(item,index) in outList" :key="index">
          <p class="top">
            <span
              class="from"
            >{{item.SourceNickName}} 向 {{item.TargetNickName}} 转出 {{item.SwapScore}}个章鱼丸</span>
          </p>
          <div class="number">
            <span class="time">{{item.CollectDate}}</span>
            <span style="color:#4E5063">-{{item.SwapScore}}</span>
          </div>
        </li>
        <li v-if="titleActive=='in'" v-for="(item,index) in inList" :key="index">
          <p class="top">
            <span
              class="from"
            >{{item.SourceNickName}} 向 {{item.TargetNickName}} 转入 {{item.SwapScore}}个章鱼丸</span>
          </p>
          <div class="number" style="color:#4E5063">
            <span class="time">{{item.CollectDate}}</span>
            <span style="color:#ff7200">+{{item.SwapScore}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import { getZsSendByPS } from "../../api";
import { getGuid } from "../../utils/index";
import { Loadmore } from "mint-ui";
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "钱包",
        title: "",
        isIcon: true
      },
      titleActive: "out",
      outList: [],
      inList: []
    };
  },
  components: {
    topBar
  },
  mounted() {
    this.getZsSendByPSList();
  },
  methods: {
    getZsSendByPSList() {
      getZsSendByPS({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data.Success) {
          let data = res.data.EntityList;
          if (!data.length) {
            Toast({
              message: "暂无数据",
              duration: 3000
            });
            return;
          }
          data.forEach(item => {
            let id = localStorage.zyUserId;
            if (item.SourceUserID == id) {
              this.outList.push(item);
            } else {
              this.inList.push(item);
            }
          });
        }
      });
    },
    transfer(type) {
      this.titleActive = type;
    }
  }
};
</script>
<style lang="stylus" scoped>
.record {
  .header {
    height: 4.21rem;
    background-image: url('./img/bell_btm.png');
    padding-top: 0.54rem;
    box-sizing: border-box;
  }

  .content {
    width: 7.04rem;
    height: 4rem;
    margin: 0 auto;
    position: relative;
    top: -3rem;

    .title {
      width: 70%;
      margin: 15px auto 25px auto;
      display: flex;
      text-align: center;
      font-size: 16px;
      color: #DEDEDE;
      font-family: 'HYg1gj';

      .tit_border {
        border-left: 1px solid #fff;
      }

      span {
        flex-grow: 1;
      }
    }

    .title-active {
      color: #D6A163;
    }
  }

  ul {
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px;
    background: #fff;
    height: 10rem;
    overflow: scroll;

    li {
      margin-bottom: 15px;
      display: flex;

      .top {
        width: 62%;
        flex: 0 1 62%;
        line-height: 0.45rem;

        .from {
          font-size: 14px;
        }
      }

      .number {
        width: 38%;
        line-height: 0.45rem;
        font-size: 16px;
        text-align: right;
        color: #FF7200;
        display: flex;
        flex-direction: column;

        span {
        }

        .time {
          font-size: 10px;
          float: right;
          color: #919191;
        }
      }
    }
  }
}
</style>

